<template>
  <div>
    <editor v-model="myValue"
      :init="init"
      @onClick="onClick">
    </editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/mobile/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
  components: {
    Editor
  },
  data () {
    return {
      Editortext: '',
      myValue: '',
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: 300,
        plugins: 'lists image media table textcolor wordcount contextmenu',
        toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
        branding: false,
        menubar: false,
      }
    }
  },
  methods: {
    onClick (e) {
      console.log(e)
    }
  },
   mounted() {
    console.log(tinymce)
    tinymce.init({})
  },
}
</script>